<template>
  <div class="pass-patient-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number :min="0" size="small" v-model="optionsInfo.contentHeight" />
      </el-form-item>
      <el-form-item label="是否截取患者">
        <el-switch v-model="optionsInfo['waitPatientSlice']"/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="optionsInfo.backgroundColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
      <el-form-item label="左右外边距">
        <el-input-number :min="0" size="small" v-model="optionsInfo.marginHorizontal" />
      </el-form-item>
      <el-form-item label="上下外边距">
        <el-input-number :min="0" size="small" v-model="optionsInfo.marginVertical" />
      </el-form-item>
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">标题区域设置</el-divider>
      </div>
      <el-form-item label="标题状态">
        <el-switch v-model="optionsInfo['headerShown']"/>
      </el-form-item>
      <template v-if="optionsInfo['headerShown']">
        <el-form-item label="标题内容">
          <el-input size="small" v-model="optionsInfo.headerName" />
        </el-form-item>
        <el-form-item label="标题字号颜色">
          <el-color-picker v-model="optionsInfo.headerFontColor" size="small" show-alpha
                           :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="标题背景色">
          <el-color-picker v-model="optionsInfo.headerBackgroundColor" size="small" show-alpha
                           :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="标题字号">
          <el-input-number :min="0" size="small" v-model="optionsInfo.headerFontSize" />
        </el-form-item>
        <el-form-item label="标题圆角">
          <el-input-number :min="0" size="small" v-model="optionsInfo.headerBorderRadius" />
        </el-form-item>
        <el-form-item label="粗细设置">
          <el-select v-model="optionsInfo.headerFontWeight" placeholder="请选择">
            <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>

    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>
      <el-form-item label="文字大小">
        <el-input-number size="small" v-model="optionsInfo.listFontsize" />
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="optionsInfo.listFontsColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
      <el-form-item label="滚动数量">
        <el-input-number :min="1" :max="10" size="small" v-model="optionsInfo.scrollableNumber" />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo.listFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
export default {
  name: "waitPatientConfig-editor",

  componentName: "waitPatientConfig-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo:Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>